<template>
  <div class="app-container">
    <xr-header
      :label="typeObj.name"
      :icon-class="`wk wk-${typeObj.icon}`"
      :icon-color="typeObj.color"
      placeholder="请输入产品名称/规格"
      show-search
      @search="handleSearch" >
      <template slot="ft">
        <el-dropdown
          v-if="moreTypes && moreTypes.length > 0"
          trigger="click"
          @command="handleCommand">
          <el-button icon="el-icon-more"/>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(item, index) in moreTypes"
              :key="index"
              :icon="item.icon | wkIconPre"
              :command="item.type">{{ item.name }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
    </xr-header>

    <div class="container">
      <flexbox
        align="center"
        justify="flex-start"
        class="filter-box">
        <el-select
          v-model="filterData.warehouseId"
          placeholder="请选择仓库"
          clearable
          class="item"
          @change="handleFilter">
          <el-option
            v-for="item in warehouseList"
            :key="item.warehouseId"
            :label="item.warehouseName"
            :value="item.warehouseId" />
        </el-select>
        <wk-product-category
          v-model="filterData.productType"
          clearable
          placeholder="请选择产品类型"
          type="jxc"
          class="filter-item item"
          style="width: 192px"
          @change="handleFilter" />
        <el-select
          v-model="filterData.type"
          placeholder="请选择类型"
          clearable
          class="item"
          @change="handleFilter">
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value" />
        </el-select>
        <el-date-picker
          v-model="filterData.dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          class="item"
          @change="handleFilter" />
      </flexbox>

      <el-table
        v-loading="loading"
        :data="dataList"
        :height="tableHeight"
        :cell-class-name="cellClassName"
        stripe
        border
        highlight-current-row
        style="width: 100%;"
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
        @sort-change="handleSort"
        @header-dragend="handleDragend">
        <template v-for="(item, index) in fieldList">
          <el-table-column
            v-if="!item.isHide && item.formType === 'pic'"
            :key="index"
            :label="item.name"
            :fixed="item.fixed"
            :prop="item.fieldName"
            width="112"
            header-align="left"
            align="center">
            <template slot-scope="scope">
              <template
                v-if="scope.row[scope.column.property] instanceof Array">
                <adapter-image
                  v-for="(valObj, valIndex) in scope.row[scope.column.property]"
                  :key="valIndex"
                  :src="valObj.url"
                  @click.stop="previewImage(scope, valIndex)" />
              </template>
              <template v-else>
                <adapter-image
                  :src="scope.row[scope.column.property]"
                  @click.stop="previewImage(scope, null)" />
              </template>
            </template>
          </el-table-column>
          <el-table-column
            v-else-if="!item.isHide"
            :key="index"
            :fixed="item.fixed"
            :prop="item.fieldName"
            :label="item.name"
            :width="item.width || ''"
            :min-width="100"
            :sortable="item.sortable || false"
            :formatter="item.formatter || null"
            :class-name="item.canVisit ? 'can-visit--underline' : ''"
            show-overflow-tooltip />
        </template>
        <el-table-column v-if="dataList.length === 0" />
        <!--<el-table-column
          :resizable="false"
          fixed="right"
          width="40">
          <template
            slot="header"
            slot-scope="slot">
            <fields-set
              :type="type"
              @change="handleRefresh"/>
          </template>
        </el-table-column>-->
      </el-table>

      <div class="p-contianer">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size.sync="pageSize"
          :total="total"
          :pager-count="5"
          class="p-bar"
          background
          layout="prev, pager, next, sizes, total, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </div>
  </div>
</template>

<script>
import { jxcFieldQueryPageListAPI } from '@/api/jxc/field'
import { jxcWarehouseQueryListAPI, jxcDetailedAllExportExcelAPI } from '@/api/jxc/warehouse'

import WkProductCategory from '@/components/NewCom/WkProductCategory'
import TableMixin from '../../mixins/Table'

export default {
  name: 'RepertoryOutIndex',
  components: {
    WkProductCategory
  },
  mixins: [TableMixin],
  data() {
    return {
      controlBtnGroup: [
      ],

      tableFieldList: [
        { name: '产品名称', fieldName: 'productName', formType: 'text' },
        { name: '产品规格', fieldName: 'spDataValue', formType: 'text' },
        { name: '产品类别', fieldName: 'productType', formType: 'text' },
        { name: '产品单位', fieldName: 'productCompany', formType: 'text' },
        { name: '所属仓库', fieldName: 'warehouseName', formType: 'text' },
        { name: '类型', fieldName: 'type', formType: 'text' },
        { name: '出入库单号', fieldName: 'orderNumber', formType: 'text' },
        { name: '出入库日期', fieldName: 'detailedTime', formType: 'date' },
        { name: '出入库数量', fieldName: 'opNumber', formType: 'text' },
        { name: '库存量', fieldName: 'remainingQuantity', formType: 'text' },
        { name: '出入库负责人', fieldName: 'ownerUserId', formType: 'text' }
      ],

      typeOptions: [
        { label: '初始化库存入库', value: 1 },
        { label: '采购入库', value: 2 },
        { label: '销售退货入库', value: 3 },
        { label: '其他入库', value: 4 },
        { label: '入库作废出库', value: 5 },
        { label: '销售出库', value: 6 },
        { label: '采购退货出库', value: 7 },
        { label: '其他出库', value: 9 },
        { label: '出库作废入库', value: 10 },
        { label: '盘盈入库', value: 11 },
        { label: '盘亏出库', value: 12 },
        { label: '盘盈入库作废出库', value: 13 },
        { label: '盘亏出库作废入库', value: 14 },
        { label: '调拨入库', value: 15 },
        { label: '调拨出库', value: 16 },
        { label: '调拨作废入库', value: 17 },
        { label: '调拨作废出库', value: 18 },
        { label: '调拨回撤入库', value: 19 }
      ],
      filterData: {
        warehouseId: '',
        productType: '',
        type: '',
        dateRange: []
      },
      warehouseList: [],

      type: 'jxc_detailed'
    }
  },
  computed: {
    moreTypes() {
      const temps = []
      // { type: 'enter', name: '导入', icon: 'import' },
      if (this.canExport) {
        temps.push({ type: 'out', name: '导出', icon: 'export' })
      }
      return temps
    }
  },
  created() {
    this.getWarehouseList()
    this.formatField(this.tableFieldList)
  },
  methods: {
    getWarehouseList() {
      jxcWarehouseQueryListAPI({
        pageType: 0
      }).then(res => {
        // console.log('warehouse list', res.data)
        this.warehouseList = res.data.list
      }).catch(() => {})
    },

    getDataList(params = {}, refresh = false) {
      if (refresh) {
        this.currentPage = 1
      }
      this.otherParams = params
      this.loading = true

      jxcFieldQueryPageListAPI({
        page: this.currentPage,
        limit: this.pageSize,
        label: this.typeObj.label,
        ...params
      }).then(res => {
        this.dataList = res.data.list
        this.total = res.data.totalRow
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },

    handleFilter() {
      console.log('filter: ', this.filterData)
      const list = []
      if (this.filterData.warehouseId) {
        list.push({
          name: 'warehouse_id',
          type: 1,
          formType: 'text',
          values: [this.filterData.warehouseId]
        })
      }
      if (this.filterData.productType) {
        list.push({
          name: 'product_type',
          type: 3,
          formType: 'category',
          values: [this.filterData.productType]
        })
      }
      if (this.filterData.type) {
        list.push({
          name: 'type',
          type: 1,
          formType: 'text',
          values: [this.filterData.type]
        })
      }
      if (this.filterData.dateRange && this.filterData.dateRange.length > 0) {
        list.push({
          name: 'detailed_time',
          type: 11,
          formType: 'date',
          values: this.filterData.dateRange
        })
      }
      this.getDataList({
        searchList: list
      }, true)
    },

    handleCommand(command) {
      switch (command) {
        case 'out':
          this.allExportExcel(jxcDetailedAllExportExcelAPI)
          break
      }
    },

    /**
     * 表格点击事件
     * @param row 被点击的行数据
     * @param field 被点击的字段
     */
    handleTableClick(row, field) {
    }
  }
}
</script>

<style scoped lang="scss">
  @import "../../styles/index";

  .filter-box {
    width: 100%;
    height: 50px;
    padding: 0 20px;

    .filter-item {
      width: 192px;
    }
    .item:not(:first-child) {
      margin-left: 15px;
    }
    .el-date-editor {
      /deep/ .el-input__icon {
        line-height: 26px;
      }
      /deep/ .el-range-separator {
        width: unset;
        line-height: 26px;
      }
    }
  }
</style>
